<template>
  <div>
    <div class="head-bg">
      <el-image :src="headBg" fit="cover"></el-image>
    </div>
    <div class="content-container">
      <div class="content">
        <div class="search-container">
          <div class="search-box">
            <el-input
              placeholder="请输入内容"
              @keyup.enter.native="getList(1)"
              v-model="queryParams.title"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <span class="search-btn" slot="append" @click="getList(1)">
                搜索
              </span>
            </el-input>
            <el-button
              :disabled="isCanReset"
              type="primary"
              class="ml-4"
              @click="resetSearch"
            >
              重置搜索
            </el-button>
          </div>
        </div>
        <DashLine />
        <div class="screen-container">
          <RouterSelectStrip
            :active-id.sync="queryParams.fieldId"
            :screenList="positionList"
            label="所属领域"
            @itemClick="positionItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.typeId"
            :screenList="needTypeList"
            label="需求类型"
            @itemClick="needTypeItemClick"
          />
        </div>

        <div
          v-loading="listLoading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          class="info-list"
        >
          <div
            v-for="item in list"
            :key="item.id"
            class="item "
            @click="handleItemClick(item)"
          >
            <div class="left">
              <div class="head">
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="sub-title">发布时间: {{ item.publishTime }}</div>
              </div>

              <p class="content" v-html="item.content"></p>

              <div class="bottom">
                <el-tag
                  v-for="(item, index) in techNeedTagList(item.tag)"
                  :key="index"
                  type="info"
                >
                  {{ item }}
                </el-tag>
                <div class="address">
                  <i
                    class="el-icon-location-outline "
                    style="font-size: 16px"
                  ></i>
                  {{ item.companyAddress }}
                </div>
              </div>
            </div>

            <div class="right" :style="{ color: statusColor(item.status) }">
              {{ statusText(item.status) }}
            </div>
          </div>
          <div
            v-if="list.length <= 0"
            class="  w-full py-8 text-xl text-center text-gray-500"
          >
            暂无数据
          </div>
        </div>

        <pagination
          v-show="tableTotal > 0"
          :total="tableTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import RouterSelectStrip from '@/components/HeadScreenStrip/RouterSelectStrip.vue'
import { getTechNeedList } from '@/api/techNeed'

export default {
  name: 'techNeed',
  components: {
    RouterSelectStrip,
  },
  computed: {
    isCanReset() {
      let query = this.queryParams
      return !query.title && !query.fieldId && !query.typeId
    },
    statusColor() {
      return (status) => {
        let res = ''
        switch (status) {
          case 1:
            res = '#959595'
            break
          case 0:
            res = '#f92b00'
            break
          default:
            res = '#f92b00'
            break
        }
        return res
      }
    },
    statusText() {
      return (status) => {
        status = parseInt(status)
        let res = ''
        switch (status) {
          case 1:
            res = '已揭榜'
            break
          case 0:
            res = '未揭榜'
            break
          default:
            res = '未揭榜'
            break
        }
        return res
      }
    },
    techNeedName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.needTypeList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return '无'
      }
    },
    filedDictName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.positionList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return '无'
      }
    },
    techNeedTagList() {
      return (tag) => {
        let resList = []
        if (Object.prototype.toString.call(tag).indexOf('Array') !== -1) {
          resList = tag
        }
        if (Object.prototype.toString.call(tag).indexOf('String') !== -1) {
          resList = tag.split(',')
        }

        return resList
      }
    },
  },
  data() {
    return {
      headBg: require('@/assets/page-head/tech-need.png'),
      positionDictName: 'user_common_field',
      positionList: [],

      techNeedDictName: 'requirement_demand_type',
      listLoading: false,
      needTypeList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        fieldId: undefined,
        typeId: undefined,
      },
      tableTotal: 1,
      list: [
        {
          id: 0,
          title: '智能科技设备研发技术1',
          publishTime: '2021.05.09',
          status: 0,
          content:
            '1.希望与金属材料、复合板材等领域的院士专家展开合作，就消费类电子金属结构件，复合板材在光学镀膜（OPVD）/高压成型/表面处理等工艺进行技术攻关。2.光学镀膜（OPVD）成本高、效率低，替代设备或替代工艺攻关，炫光及金属质感效果大幅提升。3.高压成型效率低下（目前高压成型周...',
          typeId: 2,
          location: '江西',
          positionId: 1,
        },
      ],
    }
  },
  watch: {
    '$route.query': {
      handler(v) {
        this.startRequest(v)
      },
    },
  },
  created() {
    this.initDictList()
    this.startRequest()
  },
  methods: {
    initDictList() {
      this.getDictList(this.techNeedDictName).then((res) => {
        if (res.code == 200) {
          this.needTypeList = res.data
        }
      })

      this.getDictList(this.positionDictName).then((res) => {
        if (res.code == 200) {
          this.positionList = res.data
        }
      })
    },
    // 重置搜索条件 并搜索
    resetSearch() {
      this.queryParams.title = undefined
      this.queryParams.fieldId = undefined
      this.queryParams.typeId = undefined
      this.getList(1)
    },
    // 获取列表
    getList(isRestSearch) {
      if (isRestSearch == 1) {
        this.queryParams.pageNum = 1
      }
      if (!this.queryParams.title) {
        this.queryParams.title = undefined
      }
      if (isRestSearch == 1) {
        this.queryParams.pageNum = 1
      }
      let { pageNum, title, fieldId, typeId } = this.queryParams

      this.$router.push({
        path: '/techSource/techNeed',
        query: {
          pN: pageNum,
          tt: title,
          fId: fieldId,
          tId: typeId,
        },
      })
    },
    // 整理 请求参数
    // 将 router 中 筛选参数  与 本地参数 结合
    manageQuery(sourceQuery) {
      let { pN, tt, fId, tId } = this.$route.query
      pN = pN && parseInt(pN) ? parseInt(pN) : 1
      let queryParams = {
        pageNum: pN,
        title: tt,
        fieldId: fId,
        typeId: tId,
      }
      if (sourceQuery && sourceQuery.pageNum) {
        queryParams = sourceQuery
      }
      queryParams = { ...this.queryParams, ...queryParams }
      this.listLoading = true
      if (!queryParams || !queryParams?.pageSize || !queryParams?.pageNum) {
        this.$message({
          type: 'error',
          message: '搜索条件出错',
        })

        this.listLoading = false
        this.resetSearch()
        return
      }
      for (const key in queryParams) {
        if (Object.hasOwnProperty.call(queryParams, key)) {
          const element = queryParams[key]
          this.queryParams[key] = element
        }
      }
      return queryParams
    },
    // 发起数据请求
    startRequest(sourceQuery) {
      let queryParams = this.manageQuery(sourceQuery)
      this.listLoading = true
      getTechNeedList(queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.list = res.rows
            this.tableTotal = res.total
            return res
          }
        })
        .finally(() => {
          this.listLoading = false
        })
    },

    positionItemClick(activeItem) {
      // this.queryParams.fieldId = activeItem.dictValue
      this.getList(1)
    },
    needTypeItemClick(activeItem) {
      // this.queryParams.typeId = activeItem.dictValue
      this.getList(1)
    },
    handleItemClick(item) {
      let id = item.id
      this.$router.push({ name: 'techNeedDetail', params: { id } })
    },
  },
}
</script>

<style lang="scss" scoped>
.content-container {
  & > .content {
    width: 1200px;
    margin: auto;
    // overflow: hidden;

    .screen-container {
      // margin-top: 25px;
      background-color: #f6f9ff;
    }
    .search-container {
      display: flex;
      align-items: center;
      padding: 1rem;
      margin-top: 25px;
      background-color: #f6f9ff;

      .search-box {
        display: flex;
        width: 560px;
        ::v-deep .el-input-group__append {
          background-color: #409eff;
          cursor: pointer;
        }
        .search-btn {
          background-color: #409eff;
          color: #fff;
        }
      }
    }

    .info-list {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;

      width: 100%;
      margin: 25px 0;

      .item {
        display: flex;
        height: 184px;
        width: 100%;
        border-radius: 5px;
        border: 1px solid #f1efef;
        padding: 24px 0;
        cursor: pointer;
        transition: 250ms ease-in all;
        box-shadow: 0px 3px 5px #d1d9e6, 0px -3px 5px #fff;

        &:not(:last-child) {
          margin-bottom: 24px;
        }

        .left {
          min-width: 1027px;
          width: 1027px;
          padding: 0 24px;

          .head {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            .title {
              font-weight: bold;
              font-size: 18px;
            }
            .sub-title {
              font-size: 14px;
              color: #999999;
            }
          }

          .content {
            width: 979px;
            height: 3.4rem;
            margin-bottom: 20px;
            line-height: 1.7rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 15px;
            color: #666666;
          }

          .bottom {
            display: flex;
            align-items: center;
            .el-tag {
              margin-right: 16px;
            }
            .address {
              color: #999999;
            }
          }
        }

        .right {
          flex-grow: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          font-size: 26px;
          text-align: center;
          border-left: 1px dashed #dcdcdc;
          color: #f92b00;
          // color: #959595;
        }
      }
    }
  }
}
</style>
